<template>
  <div id="App">
    <div class="findPw_container">
      <!--<img src="../assets/logo1.png" alt="">-->
      <div class="findPw_box">
        <!-- <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div> -->
        <span class="title">找回密码</span>
        <el-form ref="findPwFormRef" :model="findPwForm" :rules="findPwFormRules" label-width="0px" class="findPw_form">
          <!--用户名-->
          <el-form-item label="" prop="username">
            <el-input v-model="findPwForm.username" placeholder="学号" prefix-icon="" maxlength="9"></el-input>
          </el-form-item>
          <!--身份证号-->
          <el-form-item label="" prop="idcardNum">
            <el-input v-model="findPwForm.idcardNum" placeholder="身份证号" prefix-icon="" maxlength="18">
            </el-input>
          </el-form-item>
          <!-- <el-button type="text" style="display:flex;">忘记密码？</el-button> -->
          <el-form-item class="btn2">
            <el-button type="primary" @click="resetPw">重置密码</el-button>
            <el-button type="primary" @click="relogin">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单的数据绑定对象
      findPwForm: {
        username: '',
        idcardNum: ''
      },
      // 表单的验证规则对象
      findPwFormRules: {
        username: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 9, max: 9, message: '长度非法！', trigger: 'blur' }
        ],
        idcardNum: [
          { required: true, message: '身份证号码不能为空', trigger: 'blur' },
          { min: 18, max: 18, message: '长度非法！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetPw() {
      // 验证是否为该学生的个人信息
      if (this.findPwForm.username === '') {
        this.$msgbox.alert('请输入学号！')
      } else {
        if (this.findPwForm.username.length != 9) {
          this.$msgbox.alert('请输入要正确的学号!')
        } else {
          if (this.findPwForm.idcardNum === '') {
            this.$msgbox.alert('请输入身份证号！')
          } else {
            if (this.findPwForm.idcardNum.length !== 18) {
              this.$msgbox.alert('请输入正确的身份证号！')
            } else {
              this.$axios.post(`http://localhost:/login/updatapassword/${this.findPwForm.username}&${this.findPwForm.idcardNum}`,{username:this.findPwForm.username,idcardNum:this.findPwForm.idcardNum}).then(res=>{
                if(res.data === true){
                    this.$axios.post(`http://localhost:/login/updatapass/${this.findPwForm.username}&${this.findPwForm.idcardNum.substring(12,18)}`).then(res=>{
                      this.$msgbox.alert('密码已重置为身份证号后六位！')
                      this.$refs.findPwFormRef.resetFields()
                      this.$router.push('/ResetPw')
                    })
                }
            })
            }
          }
        }
      }
    },
    relogin() {
      this.$refs.findPwFormRef.resetFields()
      this.$router.push('/Login')
    },
    resetPassword(){

      }
    }

}

</script>

<style scoped>
.findPw_container {
  height: 100%;
  background-color: #eee;
}

.findPw_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}

.title {
  color: #409EFF;
  display: flex;
  margin-top: 30px;
  margin-left: 20px;
  font-size: 24px;
}

.findPw_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  /* margin-top: 20px; */
}

.btn1 {
  display: flex;
  justify-content: flex-end;
}

.btn2 {
  display: flex;
  justify-content: center;
}
</style>
